---
title: Custom Auth Paths
icon: Route
---

Here's a complete guide on how to customize view paths using the `AuthUIProvider` component. This example will show you how to change the auth routes from `/auth/sign-in` and `/auth/sign-out` to use custom paths such as `/auth/login` and `/auth/logout`, respectively.

### Step 1: Customize Auth View Paths

First, customize the default built-in auth paths by providing your custom routes through the `viewPaths` prop on the `<AuthUIProvider />` component. The `viewPaths` prop controls authentication pages like sign-in, sign-up, forgot password, etc.

```tsx
"use client"

import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
import { useRouter } from "next/navigation"
import Link from "next/link"

export function Providers({ children }: { children: React.ReactNode }) {
    const router = useRouter()

    return (
        <AuthUIProvider
            authClient={authClient}
            navigate={router.push}
            replace={router.replace}
            onSessionChange={() => router.refresh()}
            Link={Link}
            viewPaths={{
                SIGN_IN: "login",
                SIGN_OUT: "logout",
                SIGN_UP: "register",
                FORGOT_PASSWORD: "forgot",
                RESET_PASSWORD: "reset",
                MAGIC_LINK: "magic"
            }}
        >
            {children}
        </AuthUIProvider>
    )
}
```

Now your newly configured `viewPaths` object is as follows:

| Default Path         | Custom Path          |
| -------------------- | -------------------- |
| `/auth/sign-in`      | `/auth/login`        |
| `/auth/sign-out`     | `/auth/logout` |
| `/auth/sign-up`      | `/auth/register`     |
| `/auth/forgot-password` | `/auth/forgot`    |
| `/auth/reset-password`  | `/auth/reset`     |
| `/auth/magic-link`     | `/auth/magic`     |

### Customizing Account View Paths

Account settings paths (like settings, security, api-keys) are configured separately using the `account.viewPaths` prop:

```tsx
<AuthUIProvider
    authClient={authClient}
    account={{
        viewPaths: {
            SETTINGS: "profile",
            SECURITY: "password",
            API_KEYS: "keys",
            ORGANIZATIONS: "orgs"
        }
    }}
>
    {children}
</AuthUIProvider>
```

This would change the paths from `/account/settings` to `/account/profile`, etc.

## Adjusting Dynamic Auth Route

Next, your authentication page route can dynamically handle these paths. Set up your dynamic authentication page based on these custom routes.

Using Next.js App Router (`app` router):

```tsx
import { AuthView } from "@daveyplate/better-auth-ui"
import { authViewPaths } from "@daveyplate/better-auth-ui"

export function generateStaticParams() {
    return Object.values({
        ...authViewPaths,
        SIGN_IN: "login",
        SIGN_OUT: "logout",
        SIGN_UP: "register",
        FORGOT_PASSWORD: "forgot",
        RESET_PASSWORD: "reset",
        MAGIC_LINK: "magic"
    }).map((pathname) => ({ pathname }))
}

export default async function AuthPage({ params }: { params: Promise<{ pathname: string }> }) {
    const { pathname } = await params

    return (
        <div className="flex flex-col grow size-full items-center justify-center gap-3">
            <AuthView pathname={pathname} />
        </div>
    )
}
```

> **Note**: The `authViewPaths` object only includes authentication pages, not account settings pages. Account pages are handled separately via the `account` prop configuration.

### Example usage across your app:

#### Linking to new auth views:

```tsx
import Link from "next/link"

export default function Navbar() {
    return (
        <nav className="flex gap-4">
            <Link href="/auth/login">Login</Link>
            <Link href="/auth/register">Register</Link>
            <Link href="/auth/forgot">Forgot Password</Link>
        </nav>
    )
}
```

### Summary of Steps (Recap):

- Defined custom auth view paths within `AuthUIProvider` using the `viewPaths` prop
- Optionally defined custom account view paths using `account.viewPaths`
- Updated dynamic auth page to handle correct paths within `generateStaticParams`
- Revised links throughout your app to use the newly specified paths

You have now successfully customized your authentication and account URLs using the available customization options while preserving all the other features and integrations seamlessly.